<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #zhuye,#listdiv{
            width: 994px;
            height: auto;
            border: red solid 1px;
            margin: auto;
        }

        .tushuguanlixitong{
            font-size: xx-large;
            font-weight: lighter;
        }

        #bianji{
            position: absolute;
            top: 30%;
            right: 45%;
            z-index: 100;
            margin: auto;
            text-align: center;
            border: red solid 3px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="zhuye">
        <p class="tushuguanlixitong">图书管理系统</p>
        <div>
            <span>书名：<input type="text" id="shuming" placeholder="请输入图书昵称"></span>
            <span>作者：<input type="text" id="zuozheming" placeholder="请输入作者名"></span>
            <span>出版年份：<input type="text" id="chubannianfen" placeholder="请输入出版年份"></span>
            <button id="tianjiabtn">添加图书</button>
            <p><input type="text" id="sousuo" placeholder="请输入图书名或作者名"><button id="search">搜索</button></p>
        </div>
    </div>
    <div id="listdiv">

    </div>
    <div id="bianji">
        <p>编辑图书</p>
        <p>书名：<input type="text" id="sm"></p>
        <p>作者名：<input type="text" id="zzm"></p>
        <p>出版年份：<input type="text" id="cbnf"></p>
        <button id="baocun">保存</button>
    </div>
</body>
<script>
    const sm=document.getElementById("shuming");
    const zm=document.getElementById("zuozheming");
    const year=document.getElementById("chubannianfen");
    const tianjia=document.getElementById("tianjiabtn");
    const sousuo=document.getElementById("sousuo");
    const search=document.getElementById("search");
    const listdiv=document.getElementById("listdiv");
    let books=[];
    let bookid=0;
    tianjia.addEventListener("click",function(){
        const bookname=sm.value;
        const zzname=zm.value;
        const bookyear=year.value;
        if(bookname&&zzname&&bookyear){
            const book={
                id:bookid++,
                title:bookname,
                name:zzname,
                cbyear:bookyear
            }
            books.push(book);
            const bookdiv=document.createElement("div");
            bookdiv.classList.add('bookbox');
            bookdiv.innerHTML=`
            <p>书名：<span>${bookname}</span></p>
            <p>作者名：<span>${zzname}</span>
            <p>出版年份：<span>${bookyear}</span>
            <button onclick="bianjigongneng(${book.id})">编辑</button>
            <button onclick="shanchugongneng(${book.id})">删除</button>`;
            listdiv.appendChild(bookdiv);
            bookdiv.id = `book-${book.id}`;
            sm.value='';
            zm.value='';
            year.value='';
        }
    });

    search.addEventListener("click",function(){
        const word=sousuo.value.toLowerCase();
        const fbooks=books.filter(book=>{
            return book.title.toLowerCase().includes(word)||book.name.toLowerCase().includes(word);
        })
        listdiv.innerHTML='';
        fbooks.forEach(book=>{
            const bookdiv=document.createElement('div');
            bookdiv.innerHTML=`
            <p>书名：<span>${book.title}</span></p>
            <p>作者名：<span>${book.name}</span>
            <p>出版年份：<span>${book.cbyear}</span>
            <button onclick="bianjigongneng(${book.id})">编辑</button>
            <button onclick="shanchugongneng(${book.id})">删除</button>`;
            bookdiv.id=`book-${book.id}`;
            listdiv.appendChild(bookdiv);
        })
    })

    function bianjigongneng(id){
        const tsname=document.getElementById("sm");
        const zzname=document.getElementById("zzm");
        const cbyear=document.getElementById("cbnf");
        const bc=document.getElementById("baocun");
        const bj=document.getElementById("bianji");
        bj.style.display="block";
        const book=books.find(b => b.id === id);
        tsname.value=book.title;
        zzname.value=book.name;
        cbyear.value=book.cbyear;
        const bookbaocun=function(){
            book.title=tsname.value;
            book.name=zzname.value;
            book.cbyear=cbyear.value;
            const bookdiv=document.getElementById(`book-${id}`);
            const zid1=bookdiv.querySelector('.smm');
            const zid2=bookdiv.querySelector('.zmm');
            const zid3=bookdiv.querySelector('.rqm');
            if(zid1) zid1.textContent=book.title;
            if(zid2) zid2.textContent=book.name;
            if(zid3) zid3.textContent=book.cbyear;
            bj.style.display.none;
            bc.removeEventListener("click",bookbaocun);
        };
        bc.addEventListener("click",bookbaocun);
    }

    function shanchugongneng(id){
        const index=books.findIndex(b=>b.id===id);
        if(index!=-1)
        {
            books.splice(index,1);
            const cdiv=document.getElementById(`book-${id}`);
            cdiv.remove();
        }
    }
</script>
</html>